<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 如何让obj变成一个响应式数据？
        // effect函数执行 => 触发obj的读取操作 => 拦截obj的读取，把effect函数存储到桶里
        // 修改obj.text => 触发obj的设置操作 => obj设置时，从桶里面拿出effect函数再次执行
        let data = {
            text: '我是text文本'
        }
        function effect () {
            document.body.innerText = obj.text
        }

        const bucket = new Set()
        const obj = new Proxy(data, {
            get(target, key) {
                bucket.add(effect)
                return target[key]
            },
            set(target, key, newVal) {
                target[key] = newVal
                bucket.forEach(fn => fn())
                // 返回true，表示设置操作成功
                return true
            }
        })
        effect()
        // 控制台进行如下设置后，页面的数据修改了，表示成功
        obj.text = '我是修改后的text文本'
    </script>
</body>
</html>